<!-- 病患分布详情弹窗 -->
<template>
  <div class="PopBhDetail-wrap com-pop-wrap" v-if="isShow">
    <div class="pop-inner">
      <div class="pop-head">
        <div class="tit">病患情况</div>
        <div class="close" @click.stop="closePanel">×</div>
      </div>
      <div class="pop-body" v-if="resData">
        <div class="pop-address">{{resData.district}} {{resData.address}}</div>
        <div class="pop-infos">
          <div class="info-tit">截至{{resData.date.substr(0,11)}}24时</div>
          <div class="infos">
            <div class="item">累计确诊病例：<span class="num" style="color: #ff3535">{{resData.totalnum}}</span>例</div>
            <div class="item">累计疑似病例：<span class="num" style="color: #e8643d">{{resData.totalsuspectednum}}</span>例</div>
          </div>
          <div class="line"></div>
          <div class="info-tit">{{resData.date.substr(0,11)}} 0时 ~ 24时</div>
          <div class="infos">
            <div class="item">新增确诊病例：<span class="num" style="color: #ff3535">{{resData.newnum}}</span>例</div>
            <div class="item">新增疑似病例：<span class="num" style="color: #e8643d">{{resData.newsuspectednum}}</span>例</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
  import moment from 'moment';

  @Component({
    name: 'PopBhDetail',
    components: {},
  })
  export default class PopBhDetail extends Vue {
    @Prop() private datas?: any; // 从父组件传入的详情数据.
    private isShow: any = true;
    private currDate = moment(new Date((new Date() as any) - 24*60*60*1000)).format('YYYY年MM月DD日') + '0时 ~ 24时';
    get resData() {
      const self: any = this;
      if(self.popData) {
        return self.popData;
      }
      return null
    }
    @Emit('closePop') // 定义一个子传父事件
    private closePanel() {
      this.isShow = false;
      const self: any = this;
      self.closeDetailPop();
      return false;
    }
    private mounted() {
      console.log(this.resData);
    }
  }
</script>
<style lang="less" scoped>
@import url('../../../assets/css/Public.less');
  .PopBhDetail-wrap{
    width: 413px;
    height: 460px;
    background: url('../../../assets/img/panel/gisUI/pop-inner_bg.png') no-repeat 0 0;
    background-size: 100% 100%;
    padding: 20px;
    .pop-inner {
      .pop-head{
        padding: 17px 15px;
      }
      .pop-body{
        padding: 10px 15px 15px 35px;
        height: calc(100% - 54px);
        .pop-address{
          font-size: 20px;
          color: #8cfffe;
          margin-top: 20px;
        }
        .pop-infos{
          .info-tit{
            font-size: 20px;
            color: #8cfffe;
            margin-top: 20px;
          }
          .infos{
            .item{
              font-size: 18px;
              color: #c2e7f2;
              margin-top: 15px;
              .num{
                font-size: 22px;
                margin-right: 5px;
              }
            }
          }
          .line{
            width: 100%;
            height: 1px;
            background: radial-gradient(#17c7dd 0%,#17c7dd,transparent 95%);
            margin-top: 20px;
          }
        }
      }
    }
  }
</style>
